import { login, getUserInfo, getUserDetailById } from '@/api/user'
import { setToken, getToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
export default {
  // 开启命名空间
  namespaced: true,
  // 箭头函数
  // data() {
  //   return {响应式数据}
  // } 复用的时候如果直接写成对象 由于引用类型的特性
  // 各个组件之前共享data中的数据 的组件一个发生变化另一个也会受到影响

  // 改成函数return对象之后 每一次组件复用的时候都会重新执行一下这个函数
  // 每次返回的都是一个全新的对象 也就是每一个复用的组件 都拥有一份自己独立的数据 互不影响
  state: () => ({
    token: getToken() || '',
    userInfo: {}// 用户信息
  }),
  mutations: {
    setToken(state, payload) {
      // 存入vuex
      state.token = payload
      // 存入本地
      setToken(payload)
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    },
    // removeToken(state) {
    //   state.token = ''
    //   removeToken()
    // },
    // reomveUserInfo(state) {
    //   state.userInfo = {}
    // }
    removeToken(state) {
      state.token = ''
      state.userInfo = {}
      removeToken()
      resetRouter()// 重置路由
    }
  },
  actions: {
    asyncSetToken(ctx, data) {
      // login(data).then(res => {
      //   console.log(res)
      //   ctx.commit('setToken', res)
      // })
      return new Promise((resolve, reject) => {
        login(data).then(res => {
          // console.log(res)
          ctx.commit('setToken', res.data)
          resolve()
        })
      })
    },
    asyncGetUserInfo(ctx) {
      // 进行封装，避免不经过接口
      return new Promise((resolve, reject) => {
        getUserInfo().then(res => {
          // console.log('获取用户信息', res)
          getUserDetailById(res.data.userId).then(imgRes => {
            console.log('imgRes', imgRes)
            // 将2个接口的数据合并
            ctx.commit('setUserInfo', { ...res.data, ...imgRes.data })
            resolve({ ...res.data })
          })
          // ctx.commit('setUserInfo', res.data)
          // resolve()
        })
      })
    }

  }
}
